<template>
	<div class="detailHeader">
		<el-collapse v-model="activeNames">
			<el-collapse-item title="船舶信息" name="1">
				<template slot="title">
					<div class="compTop">
						<span class="cTitle">船舶信息</span>
						<span class="compTitle require">组织</span>
						<el-select
						v-model="vFormData.companyId"
						v-selecttext="vFormData.companyName,compData,'companyId'"
						filterable
						collapse-tags
						size="mini"
						clearable
						class="compList"
						>
						<el-option
							v-for="item in compData"
							:key="item.companyId"
							:label="item.companyName"
							:value="item.companyId"
						></el-option>
						</el-select>
					</div>
				</template>
        <el-form :model="formData" :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="船名" prop="shipName" class="top">
								<el-select
									v-model="formData.shipName"
									filterable
									collapse-tags
									size="mini"
									clearable
									placeholder="请选择船名"
									class="others"
									:disabled="status !== 'add'"
									@change="changeShipName"
								>
									<el-option
										v-for="item in shipNameData"
										:key="item.id"
										:label="item.shipName"
										:value="item.id"
									></el-option>
								</el-select>

								
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="舱口数" prop="hatchNo" class="top">
								<el-input
									v-model="formData.hatchNo"
									size="mini"
									placeholder="请输入舱口数"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="4">
							<el-form-item label="船长度" prop="shipLength" class="top">
								<el-input
									v-model="formData.shipLength"
									size="mini"
									placeholder="请输入船长度"
																		disabled

								/>
							</el-form-item>
						</el-col>
            <el-col :span="4">
							<el-form-item label="船宽度" prop="shipWidth" class="top">
								<el-input
									v-model="formData.shipWidth"
									size="mini"
									placeholder="请输入船宽度"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="船舶总吨" prop="totalTon" class="top">
								<el-input
									v-model="formData.totalTon"
									size="mini"
									placeholder="请输入船舶总吨"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="船舶净吨" prop="netTon" class="top">
								<el-input
									v-model="formData.netTon"
									size="mini"
									placeholder="请输入船舶净吨"
									disabled
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="载重吨" prop="weightTon" class="top">
								<el-input
									v-model="formData.weightTon"
									size="mini"
									placeholder="请输入载重吨"
									disabled
								/>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
      <el-collapse-item title="航次信息" name="2">
        <el-form :model="vFormData" :rules="rules" ref="vRuleForm" label-width="130px" class="demo-ruleForm">
					<el-row :gutter="20">
						<el-col :span="8">
							<el-form-item label="航次" prop="voyage" class="top">
								<el-input
									v-model="vFormData.voyage"
									size="mini"
									placeholder="请输入航次"
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8" >
							<el-form-item label="货种" prop="cargoCategoryCode" class="top">
								<el-select
									v-model="vFormData.cargoCategoryCode"
									v-selecttext="vFormData.cargoCategoryName,cargoCategoryData,'cargoCategoryCode'"
									filterable
									collapse-tags
									size="mini"
									clearable
									placeholder="请选择货种"
									class="others"
									@change="changeCargoCategoryCode"
								>
									<el-option
										v-for="item in cargoCategoryData"
										:key="item.cargoCategoryCode"
										:label="item.cargoCategoryName"
										:value="item.cargoCategoryCode"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="预抵日期" prop="arrivalTimePlan" class="top">
								<el-date-picker
									v-model="vFormData.arrivalTimePlan"
									type="datetime"
									size="mini"
                  value-format="yyyy-MM-dd HH:mm"
                  format="yyyy-MM-dd HH:mm"
								></el-date-picker>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="装卸" prop="loadUnload" class="top">
								<el-select
									v-model="vFormData.loadUnload"
									filterable
									collapse-tags
									size="mini"
									clearable
                  placeholder="请选择装卸"
									class="others"
								>
									<el-option
										v-for="item in loadUnloadData"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="贸别" prop="tradeType" class="top">
								<el-select
									v-model="vFormData.tradeType"
									filterable
									collapse-tags
									size="mini"
									clearable
                  placeholder="请选择贸别"
									class="others"
								>
									<el-option
										v-for="item in tradeTypeData"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="船代" prop="customerId" class="top">
								<el-select
									v-model="vFormData.customerId"
									v-selecttext="vFormData.customerName,customerData,'customerId'"
									filterable
									collapse-tags
									size="mini"
									clearable
                  placeholder="请选择船代"
									class="others"
								>
									<el-option
										v-for="item in customerData"
										:key="item.customerId"
										:label="item.customerName"
										:value="item.customerId"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="起运港" prop="startPortCode" class="top">
<!--								<el-select
									v-model="vFormData.startPortCode"
									v-selecttext="vFormData.startPortName,portData,'portCode','portName'"
									filterable
									collapse-tags
									size="mini"
									clearable
                  placeholder="请选择起运港"
									class="others"
								>
									<el-option
										v-for="item in portData"
										:key="item.portCode"
										:label="item.portName"
										:value="item.portCode"
									></el-option>
								</el-select>-->
                <v-select
                    :list="portData"
                    size="mini"
                    v-model="vFormData.startPortCode"
                    v-selecttext="vFormData.startPortName,portData,'portCode','portName'"
                    label="portName"
                    value="portCode"
                    placeholder="请选择起运港"
                    clearable
                  ></v-select>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="目的港" prop="endPortCode" class="top">
<!--								<el-select
									v-model="vFormData.endPortCode"
									v-selecttext="vFormData.endPortName,portData,'portCode','portName'"
									filterable
									collapse-tags
									size="mini"
									clearable
                  placeholder="请选择目的港"
									class="others"
								>
									<el-option
										v-for="item in portData"
										:key="item.portCode"
										:label="item.portName"
										:value="item.portCode"
									></el-option>
								</el-select>-->
                <v-select
                    :list="portData"
                    size="mini"
                    v-model="vFormData.endPortCode"
                    v-selecttext="vFormData.endPortName,portData,'portCode','portName'"
                    label="portName"
                    value="portCode"
                    placeholder="请选择目的港"
                    clearable
                ></v-select>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="船上电话" prop="shipPhone" class="top">
								<el-input
									v-model="vFormData.shipPhone"
									size="mini"
									placeholder="请输入船上电话"
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="上一港" prop="prePortCode" class="top">
<!--								<el-select
									v-model="vFormData.prePortCode"
									v-selecttext="vFormData.prePortName,portData,'portCode','portName'"
									filterable
									collapse-tags
									size="mini"
									clearable
                  placeholder="请选择上一港"
									class="others"
								>
									<el-option
										v-for="item in portData"
										:key="item.portCode"
										:label="item.portName"
										:value="item.portCode"
									></el-option>
								</el-select>-->
                <v-select
                    :list="portData"
                    size="mini"
                    v-model="vFormData.prePortCode"
                    v-selecttext="vFormData.prePortName,portData,'portCode','portName'"
                    label="portName"
                    value="portCode"
                    placeholder="请选择上一港"
                    clearable
                ></v-select>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="下一港" prop="nextPortCode" class="top">
<!--								<el-select
									v-model="vFormData.nextPortCode"
									v-selecttext="vFormData.nextPortName,portData,'portCode','portName'"
									filterable
									collapse-tags
									size="mini"
									clearable
                  placeholder="请选择下一港"
									class="others"
								>
									<el-option
										v-for="item in portData"
										:key="item.portCode"
										:label="item.portName"
										:value="item.portCode"
									></el-option>
								</el-select>-->
                <v-select
                    :list="portData"
                    size="mini"
                    v-model="vFormData.nextPortCode"
                    v-selecttext="vFormData.nextPortName,portData,'portCode','portName'"
                    label="portName"
                    value="portCode"
                    placeholder="请选择下一港"
                    clearable
                ></v-select>
							</el-form-item>
						</el-col>
            <el-col :span="8" >
							<el-form-item label="引航" prop="pilotage" class="top">
								<el-select
									v-model="vFormData.pilotage"
									filterable
									collapse-tags
									size="mini"
									clearable
                  placeholder="请选择引航"
									class="others"
								>
									<el-option
										v-for="item in pilotageData"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="抵港艏吃水" prop="bowDraft" class="top">
								<el-input
									v-model="vFormData.bowDraft"
									size="mini"
									placeholder="请输入抵港艏吃水"
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="抵港艉吃水" prop="sternDraft" class="top">
								<el-input
									v-model="vFormData.sternDraft"
									size="mini"
									placeholder="请输入抵港艉吃水"
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8" >
							<el-form-item label="是否半载船" prop="halfLoad" class="top">
								<el-select
									v-model="vFormData.halfLoad"
									filterable
									collapse-tags
									size="mini"
									clearable
                  placeholder="请选择是否半载船"
									class="others"
								>
									<el-option
										v-for="item in halfLoadData"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
            <el-col :span="8" >
							<el-form-item label="是否需要拖轮" prop="reqTug" class="top">
								<el-select
									v-model="vFormData.reqTug"
									filterable
									collapse-tags
									size="mini"
									clearable
                  placeholder="请选择是否需要拖轮"
									class="others"
								>
									<el-option
										v-for="item in reqTugData"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									></el-option>
								</el-select>
							</el-form-item>
						</el-col>
            <el-col :span="8" >
							<el-form-item label="拖轮个数" prop="tugNumber" class="top" v-if="vFormData.reqTug === '是'">
								<el-input
									v-model="vFormData.tugNumber"
									size="mini"
									placeholder="请输入拖轮个数"
								/>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="实际载货量" prop="actualLoad" class="top">
								<el-input
									v-model="vFormData.actualLoad"
									size="mini"
									placeholder="请输入实际载货量"
								/>
							</el-form-item>
						</el-col>
            <el-col :span="24">
							<el-form-item label="辅助作业申报" prop="assistWorkName" class="left">
								<el-checkbox-group v-model="vFormData.assistWorkName">
									<el-checkbox :label="item.processName" v-for="item in processData" :key="item.processCode"></el-checkbox>
								</el-checkbox-group>
							</el-form-item>
						</el-col>
            <el-col :span="8">
							<el-form-item label="附件" class="top">
								<!-- <el-upload
									class="upload-demo"
									action=""
									:http-request="upload"
                  :file-list="vFormData.attachmentInfoList"
                  :on-preview="handlePreview"
                  :before-remove="beforeRemove"
									:on-remove="handleRemove"
								>
									<el-button size="small" icon="el-icon-upload2" plain>点击上传</el-button>
									<div slot="tip" class="el-upload__tip">支持扩展名：.txt .jpeg .doc .docx .pdf .jpg...</div>
								</el-upload> -->
                <Upload @changeFile="changeFile" :fileListEdit="fileList" />
							</el-form-item>
						</el-col>
            <el-col :span="16">
							<el-form-item label="备注" prop="remark" class="top">
								<el-input
									type="textarea"
									:rows="2"
									placeholder="请输入备注"
									v-model="vFormData.remark"
								></el-input>
							</el-form-item>
						</el-col>
					</el-row>
				</el-form>
			</el-collapse-item>
			<el-collapse-item title="提单信息" name="3" v-if="vFormData.loadUnload === '卸'">
        <template slot="title">
          <div class="slotTitle">
            <span>提单信息</span>
            <div style="display:flex;">
              <el-upload
                class="upload-demo"
                action=""
                :on-change="handleChange"
                accept=".xlsx, .xls"
              >
                <el-button size="small" icon="el-icon-upload2" plain>导入提单</el-button>
              </el-upload>
              <el-button type="text" @click.stop="addCargo" style="margin-left:10px">添加</el-button>
            </div>
          </div>
        </template>
        <BaseTable
            :data="billList"
            :columns="billListColumns"
            :tableHeight="300"
            :pagination="false"
        ></BaseTable>
			</el-collapse-item>
		</el-collapse>
    
    

    <el-dialog
      title="预览"
      append-to-body
      :visible.sync="previewVisible"
      width="90%"
      top="3vh"
    >
      <div v-if="fileType === 'img'">
        <img :src="imgurl" style="width:100%;height:auto"/>
      </div>
      <div v-else-if="fileType === 'pdf'" style="height: 500px;">
        <iframe style="width: 100%;height: 100%;" :src="pdfUrl"></iframe>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="previewVisible = false">取 消</el-button>
        <el-button type="primary" @click="downLoadFile(fileInfo)">下载</el-button>
      </span>
    </el-dialog>
	</div>
</template>

<script>
import BaseTable from '@/components/BaseTable'
import Upload from '@/components/upload'
import publicapi from '@/api/public'
import api from '@/api/Business/reportingReview'
import pdf from 'vue-pdf';
import XLSX from 'xlsx';
import vSelect from '@/components/selectVirtual'
import ticketsManage from '../ticketsManage/index.vue'
export default {
  name: 'shipDetail',
  components: { BaseTable, vSelect, ticketsManage, pdf, Upload },
  props: {
    // 业务单元
    compData: {
      type: Array
    },
    customerData: {
      type: Array
    },
    isExamine: {
      type: Boolean,
      default: false
    },
    status: {
      type: String
    },
    fileList: { // 附件list
      type: Array
    }
  },
  data() {
    return {
      activeNames: ['1', '2', '3'],
      formData: {
        shipId: '',
        shipName: '',
        hatchNo: '',
        shipLength: '',
        shipWidth: '',
        totalTon: '',
        netTon: '',
        weightTon: ''
      },
      vFormData: {
        id: '',
        companyName: '',
        companyId: '',
        voyage: '',
        cargoCategoryCode: '',
        arrivalTimePlan: '',
        loadUnload: '',
        tradeType: '',
        customerId: '',
        startPortCode: '',
        endPortCode: '',
        shipPhone: '',
        prePortCode: '',
        nextPortCode: '',
        pilotage: '',
        bowDraft: '',
        sternDraft: '',
        reqTug: '',
        tugNumber: '',
        halfLoad: '',
        actualLoad: '',
        remark: '',
        assistWorkName: [],
        billList: [],
        attachmentInfoList: [],
        status: '1' // 保存1 保存并确报2
      }, // from
      importFileList: [], // 提单list
      fileType: '',
      fileInfo: null, // 图片预览
      shipNameData: [], // 船名列表
      cargoCategoryData: [], // 货种
      cargoData: [], // 货名
      loadUnloadData: [ // 装卸
        { label: '装', value: '装' },
        { label: '卸', value: '卸' }
      ],
      tradeTypeData: [ // 贸别
        { label: '内贸', value: '内贸' },
        { label: '外贸', value: '外贸' }
      ],
      portData: [], // 起运港
      pilotageData: [ // 引航 1自引2引航3进自引出引航4出引航进自引
        { label: '自引', value: 1 },
        { label: '引航', value: 2 },
        { label: '进自引出引航', value: 3 },
        { label: '出引航进自引', value: 4 }
      ],
      reqTugData: [
        { label: '是', value: '是' },
        { label: '否', value: '否' }
      ], // 是否需要拖轮
      packingData: [{ label: '散', value: 1 }, { label: '件', value: 2 }], // 包装
      halfLoadData: [
        { label: '是', value: '是' },
        { label: '否', value: '否' }
      ], // 是否半载
      fzzyData: ['清仓', '加水', '接电', '加油', '垃圾清运', '物资供应'],
      processData: [], // 辅助作业过程
      billList: [], // 提单信息
      billListColumns: [// 提单明细表头
        {
          prop: 'billNo',
          label: '提单号',
          width: 100,
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.billNo,
                    type: 'text',
                    size: 'mini',
                    disabled: this.source === '1' || this.destination === '1',
                    placeholder: '请输入'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billList[params.row.index], 'billNo', e)
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'cargoCode',
          label: '货名',
          width: 150,
          render: (h, params) => {
            return h(
              'div',
              [
                h(
                  'el-select',
                  {
                    props: {
                      value: params.row.cargoCode,
                      placeholder: '请选择货名',
                      size: 'mini',
                      disabled: this.source === '1' || this.destination === '1',
                      clearable: true,
                      filterable: true
                    },
                    on: {
                      change: e => {
                        console.log(e)
                        this.$set(this.billList[params.row.index], 'cargoCode', e)
                        this.cargoData.forEach(item => {
                          if (item.cargoCode === e) {
                            this.$set(this.billList[params.row.index], 'cargoName', item.cargoName)
                          }
                        })
                      }
                    }
                  },
                  this.cargoData.map(item => {
                    return h('el-option', {
                      props: {
                        value: item.cargoCode,
                        label: item.cargoName,
                        size: 'mini'
                      }
                    })
                  })
                )
              ])
          }
        },
        {
          prop: 'packing',
          label: '包装',
          width: 100,
          render: (h, params) => {
            return h(
              'div',
              [
                h(
                  'el-select',
                  {
                    props: {
                      value: params.row.packing,
                      placeholder: '货名',
                      size: 'mini',
                      disabled: this.source === '1' || this.destination === '1',
                      clearable: true
                    },
                    on: {
                      change: e => {
                        console.log(e)
                        this.$set(this.billList[params.row.index], 'packing', e)
                      }
                    }
                  },
                  this.packingData.map(item => {
                    return h('el-option', {
                      props: {
                        value: item.value,
                        label: item.label,
                        size: 'mini'
                      }
                    })
                  })
                )
              ])
          }
        },
        {
          prop: 'issuingCompanyId',
          label: '开证公司',
          width: 200,
          render: (h, params) => {
            return h(
              'div',
              [
                h(
                  'el-select',
                  {
                    props: {
                      value: params.row.issuingCompanyId,
                      placeholder: '开证公司',
                      size: 'mini',
                      disabled: this.source === '1' || this.destination === '1',
                      clearable: true,
                      filterable: true
                    },
                    on: {
                      change: e => {
                        console.log(e)
                        this.$set(this.billList[params.row.index], 'issuingCompanyId', e)
                        this.customerData.forEach(item => {
                          if (item.customerId === e) {
                            this.$set(this.billList[params.row.index], 'issuingCompanyName', item.customerName)
                          }
                        })
                      }
                    }
                  },
                  this.customerData.map(item => {
                    return h('el-option', {
                      props: {
                        value: item.customerId,
                        label: item.customerName,
                        size: 'mini'
                      }
                    })
                  })
                )
              ])
          }
        },
        {
          prop: 'cargoOwnerId',
          label: '货主',
          width: 200,
          render: (h, params) => {
            return h(
              'div',
              [
                h(
                  'el-select',
                  {
                    props: {
                      value: params.row.cargoOwnerId,
                      placeholder: '货主',
                      size: 'mini',
                      disabled: this.source === '1' || this.destination === '1',
                      clearable: true,
                      filterable: true
                    },
                    on: {
                      change: e => {
                        console.log(e)
                        this.$set(this.billList[params.row.index], 'cargoOwnerId', e)
                        this.customerData.forEach(item => {
                          if (item.customerId === e) {
                            this.$set(this.billList[params.row.index], 'cargoOwnerName', item.customerName)
                          }
                        })
                      }
                    }
                  },
                  this.customerData.map(item => {
                    return h('el-option', {
                      props: {
                        value: item.customerId,
                        label: item.customerName,
                        size: 'mini'
                      }
                    })
                  })
                )
              ])
          }
        },
        {
          prop: 'cargoAgentId',
          label: '货代',
          width: 200,
          render: (h, params) => {
            return h(
              'div',
              [
                h(
                  'el-select',
                  {
                    props: {
                      value: params.row.cargoAgentId,
                      placeholder: '货代',
                      size: 'mini',
                      disabled: this.source === '1' || this.destination === '1',
                      clearable: true,
                      filterable: true
                    },
                    on: {
                      change: e => {
                        console.log(e)
                        this.$set(this.billList[params.row.index], 'cargoAgentId', e)
                        this.customerData.forEach(item => {
                          if (item.customerId === e) {
                            this.$set(this.billList[params.row.index], 'cargoAgentName', item.customerName)
                          }
                        })
                      }
                    }
                  },
                  this.customerData.map(item => {
                    return h('el-option', {
                      props: {
                        value: item.customerId,
                        label: item.customerName,
                        size: 'mini'
                      }
                    })
                  })
                )
              ])
          }
        },
        {
          prop: 'quantity',
          label: '件数',
          width: 110,
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.quantity,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入件数'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billList[params.row.index], 'quantity', e)
                      let num = 0
                      this.billList.forEach(item => {
                        num = num + Number(item.quantity)
                      })
                      this.$set(this.formData, 'planQuantity', num)
                      console.log(params.row.index, 'index');
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'ton',
          label: '重量',
          width: 110,
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.ton,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入重量'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billList[params.row.index], 'ton', e)
                      let num = 0
                      this.billList.forEach(item => {
                        num = num + Number(item.ton)
                      })
                      this.$set(this.formData, 'planTon', num)
                      console.log(params.row.index, 'index');
                    }
                  }
                })
              ])
          }
        },
        {
          prop: 'volume',
          label: '体积',
          width: 110,
          render: (h, params) => {
            return h(
              'div',
              [
                h('el-input', {
                  props: {
                    value: params.row.volume,
                    type: 'text',
                    size: 'mini',
                    placeholder: '请输入体积'
                  },
                  on: {
                    input: e => {
                      console.log(e)
                      this.$set(this.billList[params.row.index], 'volume', e)
                      let num = 0
                      this.billList.forEach(item => {
                        num = num + Number(item.volume)
                      })
                      this.$set(this.formData, 'planVolume', num)
                      console.log(params.row.index, 'index');
                    }
                  }
                })
              ])
          }
        },
        {
          label: '操作',
          fixed: 'right',
          align: 'center',
          width: 100,
          disabled: true,
          render: (h, params) => {
            return h(
              'div',

              [

                h('el-button', {
                  props: {
                    size: 'mini'
                  },

                  domProps: {
                    // 添加标签,使用自己引入的iconfont图标
                    // innerHTML: `<i class="iconfont icon-tubiao_liebiaoshanchu" style="color:#DA2821"></i> 删除`
                    innerHTML: `<span style='color:#F75E5E'><i class='iconfont icon-1-08'></i><span  style='padding-left:5px;'>删除</span></span>`
                  },
                  on: {
                    click: () => {
                      this.handleDelete(params.row.id)
                    }
                  }
                })
              ]
            )
          }
        }
      ],
      rules: {
        shipName: [
          { required: true, message: '请选择船名', trigger: 'change' }
        ],
        hatchNo: [
          { required: true, message: '请输入舱口数', trigger: 'blur' }
        ],
        shipLength: [
          { required: true, message: '请输入船长度', trigger: 'blur' }
        ],
        shipWidth: [
          { required: true, message: '请输入船宽度', trigger: 'blur' }
        ],
        totalTon: [
          { required: true, message: '请输入船舶总吨', trigger: 'blur' }
        ],
        netTon: [
          { required: true, message: '请输入船舶净吨', trigger: 'blur' }
        ],
        weightTon: [
          { required: true, message: '请输入载重吨', trigger: 'blur' }
        ],
        voyage: [
          { required: true, message: '请输入航次', trigger: 'blur' }
        ],
        cargoCategoryCode: [
          { required: true, message: '请选择货种', trigger: 'change' }
        ],
        arrivalTimePlan: [
          { required: true, message: '请选择预抵日期', trigger: 'change' }
        ],
        loadUnload: [
          { required: true, message: '请选择装卸', trigger: 'change' }
        ],
        tradeType: [
          { required: true, message: '请选择贸别', trigger: 'change' }
        ],
        customerId: [
          { required: true, message: '请选择船代', trigger: 'change' }
        ],
        startPortCode: [
          { required: true, message: '请选择起运港', trigger: 'change' }
        ],
        endPortCode: [
          { required: true, message: '请选择目的港', trigger: 'change' }
        ],
        shipPhone: [
          { required: true, message: '请输入船上电话', trigger: 'blur' }
        ],
        prePortCode: [
          { required: true, message: '请选择上一港', trigger: 'blur' }
        ],
        nextPortCode: [
          { required: true, message: '请选择下一港', trigger: 'blur' }
        ],
        pilotage: [
          { required: true, message: '请选择引航', trigger: 'blur' }
        ],
        reqTug: [
          { required: true, message: '请选择是否需要拖轮', trigger: 'blur' }
        ],
        tugNumber: [
          { required: true, message: '请输入拖轮个数', trigger: 'blur' }
        ],
        bowDraft: [
          { required: true, pattern: /(^(\d|[1-9]\d)(\.\d{1,2})?$)|(^99$)/, message: '请输入0-100数字,最多可保留两位小数', trigger: 'blur' }
        ],
        sternDraft: [
          { required: true, pattern: /(^(\d|[1-9]\d)(\.\d{1,2})?$)|(^99$)/, message: '请输入0-100数字,最多可保留两位小数', trigger: 'blur' }
        ],
        halfLoad: [
          { required: true, message: '请选择是否半载船', trigger: 'change' }
        ],
        actualLoad: [
          { required: true, pattern: /^[0-9]+(.[0-9]{1,3})?$/, message: '请输入实际载货量,最多可保留三位小数', trigger: 'blur' }
        ]
      },
      upload_file: '',
      imgurl: '', // 预览图片
      pdfUrl: '', // 预览pdf
      dialogVisible: false, // 票货drawer
      previewVisible: false // 预览drawer
    }
  },
  mounted() {
    this.getCargoCategory()
    this.getShipNameList()
    this.getPort()
    this.getProcess()
  },
  watch: {
    'vFormData.cargoCategoryCode': {
      handler(newV) {
        this.changeCargoCategoryCode(newV)
      },
      deep: true
    }
  },
  methods: {
    /**
     * 添加货物信息
     */
    addCargo() {
      const packing = (this.vFormData.cargoCategoryCode.slice(0, 2) === '04' || this.vFormData.cargoCategoryCode.slice(0, 2) === '07') ? 2 : ''

      const obj = {
        billNo: '',
        cargoCode: '',
        packing,
        issuingCompanyId: '',
        cargoOwnerId: '',
        cargoAgentId: '',
        quantity: '',
        ton: '',
        volume: '',
        id: new Date().getTime()
      }
      this.billList.push(obj)
    },
    /**
     * 获取货种
     */
    async getCargoCategory() {
      const res = await publicapi.getlistCargoCategory()
      this.cargoCategoryData = res.data.data
    },
    /**
     * 根据货种获取货名
     */
    changeCargoCategoryCode(e) {
      publicapi.getListCargo({ cargoCategoryCode: e }).then(res => {
        this.cargoData = res.data.data
      }).catch(() => {})
    },
    /**
	 * 获取船名信息
	 */
    async getShipNameList() {
      const res = await publicapi.getshiplist('')
      this.shipNameData = res.data.data
    },
    /**
	 * 获取港口
	 */
    async getPort() {
      const res = await publicapi.getPortList()
      this.portData = res.data.data
    },
    /**
	 * 获取辅助作业过程
	 */
    async getProcess() {
      const res = await publicapi.getProcessList({ assistType: '1' })
      this.processData = res.data.data
    },
    /**
	 * 修改船名，获取船详细信息
	 */
    async changeShipName(e) {
      this.formData.shipId = e
      const res = await api.reqGetBoatDetail({ id: e })
      for (const key in res.data.data) {
        const element = res.data.data[key];
        if (this.formData.hasOwnProperty(key)) {
          this.formData[key] = element
        }
      }
      delete (this.formData.id)
    },
    /**
     * 导入提单
     */
    handleChange(file, fileList) {
      this.importFileList = [fileList[fileList.length - 1]]; // 只能上传一个Excel，重复上传会覆盖之前的
      this.file = file.raw;
      const reader = new FileReader();
      const _this = this;
      reader.readAsArrayBuffer(this.file);
      reader.onload = function() {
        const buffer = reader.result;
        const bytes = new Uint8Array(buffer);
        const length = bytes.byteLength;
        let binary = '';
        for (let i = 0; i < length; i++) {
          binary += String.fromCharCode(bytes[i]);
        }
        const wb = XLSX.read(binary, {
          type: 'binary'
        });
        const outdata = XLSX.utils.sheet_to_json(wb.Sheets[wb.SheetNames[0]]);
        console.log(outdata, 'outdataddd');
        _this.billList = [];
        // 从解析出来的数据中提取相应的数据
        if (_this.cargoData.length === 0) {
          _this.$message.warning('请选择货种')
          return
        }
        let num = 0
        outdata.forEach(item => {
          if (_this.cargoData.filter(i => i.cargoName === item['货名']).length === 0) {
            if (num === 0) _this.$message.warning('该提单与所选货种不匹配，请核实后再导入！')
            num++
            return
          }
          _this.billList.push({
            id: Math.round(Math.random() * 100000),
            billNo: item['提单号'],
            cargoCode: _this.cargoData.filter(i => i.cargoName === item['货名'])[0].cargoCode,
            cargoName: item['货名'],
            packing: _this.packingData.filter(i => i.label === item['包装'])[0].value,
            issuingCompanyId: _this.customerData.filter(i => i.customerName === item['开证公司'])[0].customerId,
            issuingCompanyName: item['开证公司'],
            cargoOwnerId: _this.customerData.filter(i => i.customerName === item['货主'])[0].customerId,
            cargoOwnerName: item['货主'],
            cargoAgentId: _this.customerData.filter(i => i.customerName === item['货代'])[0].customerId,
            cargoAgentName: item['货代'],
            quantity: item['件数'],
            ton: item['重量'],
            volume: item['体积']
          });
        });
      };
    },
    handleDelete(id) {
      this.billList = this.billList.filter(item => item.id !== id)
      console.log(id, 'row');
    },
    /**
     * 修改文件
     */
    changeFile(fileList) {
      console.log('ship');
      this.vFormData.attachmentInfoList = fileList
    },
    /**
     * 按钮事件
     */
    buttonClick(i) {
      i()()
    }

  }
}
</script>

<style lang="less" scoped>
@import "~@/assets/form.less";

[v-cloak] {
	display: none;
}

</style>
